import { IconSetting, IconUserCircle } from '@douyinfe/semi-icons'
import { TabPane, Tabs } from '@douyinfe/semi-ui'
import AccountSettings from '../components/AccountSettings/AccountSettings'
import UserBaseInfo from '../components/UserBaseInfo/UserBaseInfo'

export default function Center() {
  return (
    <div className="flex">
      <div className="flex1"></div>
      <div className="flex4 m-t-10">
        <Tabs tabPosition="left" type="line" keepDOM={false}>
          <TabPane
            tab={
              <span>
                <IconUserCircle />
                个人资料
              </span>
            }
            itemKey="1"
          >
            <UserBaseInfo />
          </TabPane>
          <TabPane
            tab={
              <span>
                <IconSetting />
                账号设置
              </span>
            }
            itemKey="2"
          >
            <AccountSettings />
          </TabPane>
        </Tabs>
      </div>
    </div>
  )
}
